<template>
    <PageCard title="渠道管理列表">
        <ApiTable :api="load" ref="table" :params="params">
            <el-table-column type="index" width="80" label="序号"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="channelName" label="渠道名称" width="400px"/>
            <el-table-column :show-overflow-tooltip="true" prop="ruleContent" label="规则">
                <template slot-scope="scope">
                    <div v-if="scope.row.ruleContent">
                        <span v-if="JSON.parse(scope.row.ruleContent).opposite">① {{JSON.parse(scope.row.ruleContent).opposite}} </span>&nbsp;
                        <span v-if="JSON.parse(scope.row.ruleContent).effective">② 有效期至：{{JSON.parse(scope.row.ruleContent).effective}} </span>&nbsp;
                        <span v-if="JSON.parse(scope.row.ruleContent).maxPointDay">③ 单用户日最大限领：{{JSON.parse(scope.row.ruleContent).maxPointDay}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="" label="操作" width="300px">
                <template slot-scope="scope">
                    <el-button class="ed-table-bottom ed_blue_border"  @click="setDialogVisible(scope.row)">设置规则</el-button>
                </template>
            </el-table-column>
        </ApiTable>

        <EdDialog ref="dialogRef" v-if="dialogVisible" width="600px" title="设置规则" @close-dialog="closeDialog" @save-dialog="saveDialog">
            <el-form :model="form" ref="formRef" size="small">
                <el-form-item label="积分规则：" class="margin0" :rules="$validate.validates({required:true,msg:'规则不能为空'})" prop="pointRuleStr">
                    <el-select v-model="form.pointRuleStr" class="width-50" @change="changePointRule" placeholder="请选择规则">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="ruleDetailsList" v-if="pointRuleObj.opposite">
                <div>① {{pointRuleObj.opposite}}</div>
                <div v-if="pointRuleObj.isPointRule1">② 有效期至：{{pointRuleObj.effective}} </div>
                <div v-if="pointRuleObj.isPointRule2">③ 单用户日最大限领：{{pointRuleObj.maxPointDay}}</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false;$refs.formRef.resetFields();" class="el-button-primary-no">取&nbsp;&nbsp;消</el-button>
                <el-button type="primary" class="el-button-primary-style marginLeft8" @click="save('formRef')">确&nbsp;&nbsp;定</el-button>
            </span>
        </EdDialog>
    </PageCard>
<!--        <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue"></ed-confirm-delete>-->
</template>

<script>
    import EdDialog from 'src/components/EdDialog.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import EdTable from "src/components/EdTable.vue";
    import {queryList ,updateChannel ,queryChannel} from "src/api/activity"
    export default {
        name: "ChannelList",
        components:{
            EdTable,
            PageCard, ApiTable,
            EdDialog
        },
        data(){
            return{
                params:{
                    rowKey:"channelId"
                },
                queryForm:{
                    rowKey:"channelId"
                },
                dialogVisible:false,
                form:{
                    pointRuleStr:null
                },
                options:[],
                pointRuleObj:{
                    isPointRule1:false,
                    isPointRule2:false,
                },
                channelId:"",
                pid:"",
                ruleType:""
            }
        },
        mounted(){
            queryList({
                page: 1,
                pageSize: 10000
            }).then(response => {
                if(response.code == 20000 && response.data.records) {
                    this.options = [];
                    for (let i=0;i<response.data.records.length;i++){
                        this.options.push({
                            value:response.data.records[i].id,
                            label:response.data.records[i].ruleName,
                            opposite:response.data.records[i].opposite,
                            effective:response.data.records[i].effective,
                            maxPointDay:response.data.records[i].maxPointDay,
                        })
                    }

                }
            })

            this.$nextTick(()=>{
                this.$refs.table.load(1)
            });
        },
        methods:{
            load:queryChannel,
            setDialogVisible(row){
                this.dialogVisible = true;
                this.channelId = row.channelId;
                this.pid = row.pid;
                this.ruleType = row.ruleType;
            },
            changePointRule(val){
                for (let i=0;i<this.options.length;i++){
                    if(val == this.options[i].value){
                        this.pointRuleObj.opposite = this.options[i].opposite;
                        this.pointRuleObj.effective = this.options[i].effective;
                        this.pointRuleObj.maxPointDay = this.options[i].maxPointDay;
                        this.pointRuleObj.isPointRule1 = !!this.options[i].effective;
                        this.pointRuleObj.isPointRule2 = !!this.options[i].maxPointDay;
                    }
                }
            },
            close(){
                this.init();
            },
            closeDialog(){
                this.dialogVisible = false;
                this.form = {
                    pointRuleStr:null
                };
                this.pointRuleObj = {
                    isPointRule1:false,
                    isPointRule2:false,
                };
            },
            saveDialog(){
                this.save('formRef')
            },
            init(){
                this.form = {
                    pointRuleStr:null
                };
                this.pointRuleObj = {
                    isPointRule1:false,
                    isPointRule2:false,
                };
                this.channelId = "";
                this.pid = "";
                this.ruleType = "";
            },
            save(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        updateChannel({channelId:this.channelId,ruleId:this.form.pointRuleStr,pid:this.pid,ruleType:this.ruleType}).then(response => {
                            if(response.code == 20000) {
                                this.$message.success({
                                    message: '已成功更新规则',
                                    duration: 2000,
                                    center:true
                                });
                                this.dialogVisible = false;
                                this.$refs.dialogRef.close()
                                this.$refs.table.load(1)
                            }
                        })
                    }
                    this.$refs.dialogRef.hideLoading()
                });

            }
        }
    }
</script>

<style lang="scss">
    .channelListDialog{
        .el-dialog__footer{
            border-top: 1px solid rgba(0, 0, 0, 0.06);
        }
    }
</style>

<style scoped lang="scss">
    .ruleDetailsList{
        background: #E6F7FF;
        opacity: 1;
        border-radius: 2px;
        padding: 12px;
        margin:9px 30px 5px 92px;
        div {
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.85);
        }
    }
</style>